<template>
	<view class="page">
		<view class="container">
		<view class="title_head">
		  <view>{{language.phoneFace.label1}}：</view> <view>{{detail.name}}</view>
		</view>
		<view class="title_content">
		  <view class="v_content" >{{language.phoneFace.label3}}：</view> <view class="v_content">{{detail.departName}}</view>
		</view>
		<view class="title_content">
		  <view class="v_content">{{language.phoneFace.label2}}：</view> <view class="v_content">{{detail.studentNo}}</view>
		</view>
		<view class="title_content">
		  <view class="v_content" >{{language.phoneFace.label4}}：</view> <view class="v_content">{{detail.cardId ? detail.cardId : language.phoneFace.label5}}</view>
		</view>
		<view class="title_content">
		  <view class="v_content" >{{language.phoneFace.label6}}：</view> 
		</view>
		
		<view class="uploadImgBox">
		<view class="smallImgBox">
		  <block v-if="photo">
		    <view class="logoinfo">
		    <image class="logoinfo" mode="aspectFit" :src="photo"    name="headimage" ></image>
		    </view>
		  </block>
		  <view v-if=" !photo" class="defimg"><image   class="moreImg" :src="imgBaseUrl+'/images/default_avatar.png'"></image></view>
		</view>
		</view> 
		<view class="container-optBtn" >
		    <view @click="takePhone" data-type="camera" class="container-btn">{{language.phoneFace.btn1}}</view>
		</view>
		<view class="tipText">
			<u-icon name="info-circle-fill" color="#169bd5" size="26" ></u-icon>
			<text style="margin-left:10rpx;">
			{{language.phoneFace.tip}}
			</text>
		</view>
		<view>
		  <view class='btnOperate' style="margin-top: 20rpx;" v-if="isFirstRegPhone">
		    <view>
		      <button @click="handleNext">{{language.phoneFace.btn2}}</button>
		    </view>
		  </view>
		  <view style="background-color: #f0f0f0;margin-top: 30rpx;padding-bottom: 20rpx;border-radius: 30rpx;margin-bottom: 40rpx;">
		    <view  class="bottomview">
		      <text>{{language.phoneFace.tip1}}： 
		      </text>
		    </view>
		    <view  class="bottomview">
		      <text style="text-indent: 2em">{{language.phoneFace.tip2}}
		      </text>
		    </view>
		    <view  class="bottomview">
		      <text style="text-indent: 2em">{{language.phoneFace.tip3}}
		      </text>
		    </view>
		    <view  class="bottomview">
		      <text style="text-indent: 2em">{{language.phoneFace.tip4}}
		      </text>
		    </view>
		    <view  class="bottomview">
		      <text style="text-indent: 2em">{{language.phoneFace.tip5}}
		      </text>
		    </view>
		  </view>
		
		  
		</view>
		
		</view>

	</view>
</template>

<script>
	import {getStudentApi,addOrUpdateWithPhotoUrlApi} from '@/common/api/commonApi/phoneApi.js'
	export default {
		data() {
			return {
				detail:{},
				photo: '',
				isFirstRegPhone : uni.getStorageSync('isFirstRegPhone')? uni.getStorageSync('isFirstRegPhone') : false,
				selectInfoAccount: uni.getStorageSync('selectInfoAccount'),
			}
		},
		methods: {
			takePhone(){
				let detail = this.detail
				wx.getSetting({
					success:(res)=> {
						if (res.authSetting['scope.camera']) {
							this.goPage('/pages/componentsC/phone/faceEntry',{
								detail: JSON.stringify(detail)
							})
						} else {
							wx.authorize({
								scope: 'scope.camera',
								success: ()=> {
									this.goPage('/pages/componentsC/phone/faceEntry',{
											detail: JSON.stringify(detail)
									})
								},
								fail:()=>{
									this.openConfirm()	
								}
								})
						}
					},
					fail:()=> {
					}
				})
			},
			openConfirm() {
				wx.showModal({
					content: '检测到您没打开访问摄像头权限，是否打开？',
					confirmText: "确认",
					cancelText: "取消",
					success: (res)=> {
					console.log(res);
					//点击“确认”时打开设置页面
					if (res.confirm) {
						console.log('用户点击确认')
						wx.openSetting({
							success: (res) => {
								this.goPage('/pages/componentsC/phone/faceEntry')
							}
						})
					} else {
						console.log('用户点击取消')
					}
					}
				});
			},
			handleNext(){
				if(!this.photo && !this.detail.cardId) return this.setMessage('请先录入人脸')
				addOrUpdateWithPhotoUrlApi({
					xxbm: this.xxbm,
					pin: this.selectInfoAccount.code,
					usid:this.selectInfoAccount.id,
					photo:this.photo,
					cardId:this.detail.cardId ? this.detail.cardId : '',
				}).then(res=>{
					console.log(res);
					if(res.status == 200){
						setTimeout(()=>{
							this.goPage('/pages/componentsC/phone/familyManDetail',{
								isFirstRegPhone : this.isFirstRegPhone
							})
						},1000)
					}else{
						this.setMessage(res.message)
					}
				})
			},
			getInfo(){
				let data = {
					usid: this.selectInfoAccount.id,
					// usid: '1771107644199706625',//对应 用户USID
					// xxbm: this.selectInfoAccount.departmentId,
					xxbm: this.xxbm,
				}
				getStudentApi(data).then(res=>{
					this.photo = res.model.photo
					this.detail = res.model
				})
			}
		},
		onLoad() {
			this.setPageTitle(this.language.phoneFace.title)
		},
		onShow() {
			this.getInfo()
		},
	}
</script>

<style lang="scss" scoped>
.page{
	.tipText{
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		padding-left: 30rpx;
	}
	
}
/* pages/facereg/facereg.wxss */
.container {
	height: 100vh;
	padding: 10rpx 30rpx;
	padding-bottom: 100rpx;
	overflow: visible;
	box-sizing: border-box;
	background:#fff;
}
.title_head{
  margin: 20px 20px 10px 20px;
  display: flex;
  justify-content: space-between;
}
.title_content{
  display: flex;
    justify-content: space-between;
    margin: 20px 20px 10px 20px;
    font-size: 14px;
    color: #47322b8c;
}

.uploadImgBox {
  margin: 5rpx 0;
}
.logoinfo {
  height: 378rpx;
  width: 260rpx;
  margin: 2rpx;
}
 
.smallImgBox {
  display: flex;
  justify-content: center;
  margin-top:10rpx;
}
 
.moreImg {
  border-radius: 10rpx;
  height: 180rpx;
  width: 180rpx;
  margin: 20rpx ;
  display: flex;
  flex-direction: column;
  align-items: center; 
}
.button{  
 height: 90rpx;  
 width: 240rpx;  
 font-size: 38rpx;  
 background-color: rgba(146, 163, 45, 0.288);  
 font-weight: 600;  
 color: white;
 margin: 15rpx;
 } 
 button::after {
  border: none;
}
.btn_dialog_view{
  display: grid;
  justify-content: center;
}
.defimg{
    width: 220rpx;
    height: 200rpx;
    // border-color: #4089f0;
    // border-width: 1px;
    // border-style: dashed;
    border-radius: 8px;
}

.container-optBtn{
	width: 100%;
	display: flex;
  /**justify-content: space-between;**/
  justify-content:center;
	align-items: center;
	margin-top: 40rpx;
}
.container-btn{
	min-width: 45%;
	height: 90rpx;
	border-radius: 10rpx;
	color: #fff;
	text-align: center;
	line-height: 90rpx;
	background: #4089f0;
}
.bottomview{
  display: flex;
  font-size: 16px;
  font-family: sans-serif;
  color: #5a5745;
  margin-top: 10rpx;
  box-sizing: border-box;
  padding: 0 30rpx;
}


.btnOperate>view {
  width: 100%;
  height: 45px;
  line-height: 45px;
  margin-left: auto;
  margin-right: auto;
}

.btnOperate>view:nth-child(1)>button {
  color: #fff;
  height: 45px;
  line-height: 45px;
  background-color: #4089f0;
}
</style>
